<template>
  <div id="project-container" class="recycle">
    <XrHeader icon-class="wk wk-icon-bin" :show-search="false" icon-color="#fd5b4a"
              label="回收站"/>
    <div v-empty="list.length === 0 && !loading" class="content"
         xs-empty-text="暂无排行">
      <div v-loading="loading" class="task-cells">
        <template v-for="(item, index) in list" :key="index">
          <TaskCell :data="item"
                    :data-index="index"
                    class="item-list"
                    disabled
                    @on-handle="taskCellHandle"/>
        </template>
        <span></span>

      </div>
    </div>

    <!-- 详情 -->
    <TaskDetail v-if="taskDetailShow" ref="particularsRef"
                :id="taskID"
                :detail-index="detailIndex"
                is-trash
                @on-handle="detailHandle"
                @close="closeBtn"/>
  </div>
</template>

<script setup>
import {workTrashIndexAPI} from '/src/api/pm/recycle.js'

import TaskCell from '/src/views/pm/components/TaskCell.vue'
import TaskDetail from '/src/views/taskExamine/task/components/TaskDetail.vue'
import XrHeader from '/src/components/XrHeader/index.vue'

const optionData = reactive({
  loading: true,
  list: [],
  // 详情数据
  taskID: '',
  detailIndex: -1,
  taskDetailShow: false
})

const {
  loading,
  list,
  taskID,
  detailIndex,
  taskDetailShow
} = toRefs(optionData)

function created() {
  getList()
}

created()

onMounted(() => {
  document
      .getElementById('project-container')
      .addEventListener('click', taskShowHandle, false)
})


/**
 * 获取数据
 */
function getList() {
  workTrashIndexAPI()
      .then(res => {
        optionData.list = res.data.data
        for (const i of optionData.list) {
          i.isDeleted = true
          if (i.status == 5) {
            i.checked = true
          }
        }
        optionData.loading = false
      })
      .catch(() => {
        optionData.loading = true
      })
}

/**
 * 列表操作
 */
function taskCellHandle(data) {
  if (data.type == 'view') {
    const dataCell = data.data
    optionData.taskID = dataCell.item.taskId
    optionData.detailIndex = dataCell.index
    optionData.taskDetailShow = true
  }
}

/**
 * 详情操作
 */
function detailHandle(data) {
  if (data.index == 0 || data.index) {
    // 是否完成勾选
    if (data.type == 'title-check') {

      // this.$set(optionData.list[data.index], 'checked', data.value)
      optionData.list[data.index]['checked'] = data.value
    } else if (
        data.type == 'delete' ||
        data.type == 'activate-task' ||
        data.type == 'recover-task' ||
        data.type == 'thorough-delete-task'
    ) {
      optionData.list.splice(data.index, 1)
    } else if (data.type == 'change-stop-time') {
      const stopTime = new Date(data.value).getTime() / 1000 + 86399
      if (stopTime > new Date().getTime() / 1000) {
        optionData.list[data.index].isEnd = false
      } else {
        optionData.list[data.index].isEnd = true
      }
      optionData.list[data.index].stopTime = data.value
    } else if (data.type == 'change-priority') {
      optionData.list[data.index].priority = data.value.id
    } else if (data.type == 'change-name') {
      optionData.list[data.index].name = data.value
    } else if (data.type == 'change-comments') {
      const commentCount = optionData.list[data.index].commentCount
      if (data.value == 'add') {
        optionData.list[data.index].commentCount = commentCount + 1
      } else {
        optionData.list[data.index].commentCount = commentCount - 1
      }
    } else if (data.type == 'change-sub-task') {
      optionData.list[data.index].childWCCount = data.value.subdonecount
      optionData.list[data.index].childAllCount =
          data.value.allcount
    } else if (data.type == 'change-main-user') {
      optionData.list[data.index].mainUser = data.value
    } else if (data.type == 'change-label') {
      optionData.list[data.index].labelList = data.value
    }
  }
}

function click() {
  loading.value = false
  console.log("click")
  console.log("loading", loading.value)
  console.log("loading", list.value)

  list.value = [{a:1}, {b: 2}]
  loading.value = false

}

function click2() {
  list.value = []

}

/**
 * 关闭详情页
 */
function closeBtn() {
  optionData.taskDetailShow = false
}

/**
 * 点击空白处关闭详情
 */
const particularsRef = ref()

function taskShowHandle(e) {
  console.log("taskShowHandle", taskShowHandle)
  console.log("taskShowHandle", e)
  if (particularsRef.value && !particularsRef.value.contains(e.target)) {
    let hidden = true
    const items = document.getElementsByClassName('item-list')
    for (let index = 0; index < items.length; index++) {
      const element = items[index]
      if (element.contains(e.target)) {
        hidden = false
        break
      }
    }
    optionData.taskDetailShow = !hidden
  }
}


</script>


<script>


export default {
  components: {
    // TaskDetail,
    // TaskCell,
    // XrHeader
  },

  data() {
    return {}
  },


  mounted() {

  },

  methods: {}
}
</script>

<style scoped lang="scss">
.recycle {
  height: 100%;
  overflow: hidden;
  position: relative;

  .xr-header {
    padding-top: 0;
  }

  .content {
    background-color: white;
    position: absolute;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 3px;
    overflow-y: auto;
    border: 1px solid #e6e6e6;
  }
}

.task-cells {
  min-height: 300px;
}
</style>
